<template>
  <el-card>
    <div slot="header">
      <h3>供货信息-恢复供货查看页面</h3>
    </div>
    <div>
      <!-- 发起原因输入框 -->
      <LaunchReasonInput
        :reason.sync="launchReason"
        :isDisabled="true"
      />
      <el-row>
        <skus-table
          :loading="tableInfo.loading"
          :columns="tableInfo.columns"
          :dataSource="tableInfo.list"
          :defaultMinWidth="120"
        />
      </el-row>
      <FooterFields :footerFields="footerFields" />
    </div>
  </el-card>
</template>
<script>
import { ApiRequest } from '@api/basePage';
import SkusTable from '@/components/skusTable';
import FooterFields from '@/pages/commodity/components/FooterFields';
import LaunchReasonInput from '@/components/LaunchReasonInput';
import { tableColumns } from '../constants/recoverSupply/viewPage';
import { isResponseSuccess } from '@/utils/bizUtils';
export default {
  components: {
    SkusTable,
    FooterFields,
    LaunchReasonInput
  },
  data () {
    return {
      launchReason: '', // 发起原因
      tableInfo: {
        loading: false,
        list: [],
        columns: tableColumns
      },
      footerFields: {}
    }
  },
  mounted () {
    this.getTableDataAction(this.$route.query.recordNo);
  },
  methods: {
    /* 获取表格数据action */
    getTableDataAction (recordNo) {
      this.tableInfo.loading = true;
      ApiRequest(
        `/sysback/supplyarea/getUpdateDetailByRecordNo?recordNo=${recordNo}`,
        'post'
      ).then(res => {
        this.tableInfo.loading = false;
        if (!isResponseSuccess(res)) {
          return false;
        }
        const { nowPriceRatio, recordDetail } = res.retData;
        this.tableInfo.list = nowPriceRatio;
        this.footerFields = recordDetail;
        this.launchReason = recordDetail?.launchReason; // 设置发起原因回显
      }).catch(() => {
        this.tableInfo.loading = false;
      })
    }
  }
}
</script>
